.main {
  min-height: 70vh;
  background-color: #aa7c5a;
}

.main-container {
  padding: 50px 70px;
  h3 {
    font-size: 50px;
    opacity: 0.75;
  }

  h1 {
    font-size: 80px;
    padding: 0 80px;
  }

  h2 {
    opacity: 1;
  }
}

.main-item-container {
  padding: 50px;
  gap: 50px 200px;
  flex-wrap: wrap-reverse;
}

.main-item {
  width: 200px;
  gap: 10px;

  p {
    text-align: center;
    opacity: 0.75;
  }
}

.main-line {
  width: 1px;
  height: 100%;
  background-color: #fafafa;
  opacity: 0.75;
  display: none;
}

.faq {
  padding: 30px;
  box-sizing: border-box;
  background-color: #fafafa;
  box-shadow: inset 0px 40px 47px -22px rgba(0, 0, 0, 0.2);

  p {
    color: #653e36;
    text-align: justify;
  }
}

.faq-container {
  h5 {
    padding-bottom: 30px;
  }
}

.faq-item {
  max-width: 1000px;
  overflow: hidden;
  img {
    transform: rotate(180deg);
    transition: transform 0.35s;
  }
  h5 {
    padding: 15px 0;
    cursor: pointer;
  }
  p {
    padding-bottom: 15px;
  }
  a {
    color: #aa7c5a;
  }
}

.faq-item.closed p {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease,
    padding-bottom 0.35s ease;
}

.faq-item.open p {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  padding-bottom: 15px;
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease,
    padding-bottom 0.35s ease;
}

.faq-item.open h5 img {
  transform: rotate(90deg);
}

.faq-line {
  width: 100%;
  height: 1px;
  background-color: #653e36;
  flex-shrink: 0;
  opacity: 0.25;
}

@media (max-width: 976px) {
  .main-container {
    padding: 30px;
    h1 {
      padding: 0 20px;
      font-size: 32px;
    }
    h3 {
      font-size: 20px;
    }
  }
  .main-line {
    display: flex;
    height: 1px;
    width: 100%;
  }
}